<template>
  <div class="test">
    <div class="body">
      <div class="start_test" v-if="node == 0">
        <div class="text">
          <div class="name">设备检测</div>
          <div class="tips">为了您能正常直播，请先检测您的设备及网络</div>
          <button @click="goTesting">开始检测</button>
        </div>
      </div>
      <div class="testing" v-if="node > 0">
        <div class="heading">设备检测</div>
        <div class="centent">
          <div class="test_list">
            <div
              class="box"
              :class="node == index + 1 ? 'active' : ''"
              v-for="(item, index) in testingList"
              :key="index"
            >
              <img
                :src="node == index + 1 ? item.select : item.notSelect"
                alt=""
              />
              <div class="name">{{ item.name }}</div>
            </div>
          </div>
          <div class="test_box">
            <!-- 摄像头检测 -->
            <checkVideo @sysStatus="sysStatus" v-if="node == 1"></checkVideo>
            <!-- 麦克风检测 -->
            <checkAudio @sysStatus="sysStatus" v-if="node == 2"></checkAudio>
            <!-- 扬声器检测 -->
            <checkVoice @sysStatus="sysStatus" v-if="node == 3"></checkVoice>
            <!-- 其他/网络检测 -->
            <checkOther @sysStatus="sysStatus" v-if="node == 4"></checkOther>
            <!-- 下一步 -->
            <div class="next">
              <button v-if="!status" @click="nextNode">
                <span v-if="node < 4">下一步</span>
                <span v-else>进入直播</span>
              </button>
              <button class="go_TRTC" @click="nextNode" v-else>
                <span v-if="node < 4">下一步</span>
                <span v-else>进入直播</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 摄像头
import checkVideo from "./component/checkVideo";
// 麦克风
import checkAudio from "./component/checkAudio";
// 扬声器
import checkVoice from "./component/checkVoice";
// 网络检测
import checkOther from "./component/checkOther";

export default {
  components: {
    checkVideo,
    checkAudio,
    checkVoice,
    checkOther,
  },
  data() {
    return {
      status: false,
      node: 1,
      testingList: [
        {
          name: "摄像头检测",
          select: require("@/assets/img/testing/icon-cameras-selected.svg"),
          notSelect: require("@/assets/img/testing/icon-cameras-unselected.svg"),
        },
        {
          name: "麦克风检测",
          select: require("@/assets/img/testing/icon-microphones-selected.svg"),
          notSelect: require("@/assets/img/testing/icon-microphones-unselected.svg"),
        },
        {
          name: "扬声器检测",
          select: require("@/assets/img/testing/icon-loudspeakers-selected.svg"),
          notSelect: require("@/assets/img/testing/icon-loudspeakers-unselected.svg"),
        },
        {
          name: "网络检测",
          select: require("@/assets/img/testing/icon-network-selected.svg"),
          notSelect: require("@/assets/img/testing/icon-network-unselected.svg"),
        },
      ],
    };
  },
  mounted() {},
  methods: {
    sysStatus(status) {
      this.status = status;
    },
    goTesting() {
      this.node = 1;
      this.status = false;
    },
    nextNode() {
      if (this.node == 4) {
        if (!this.status) {
          this.$confirm(
            "您当前的直播环境无法正常直播，是否依然进入?",
            "您无法正常直播",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              this.$message({
                type: "success",
                message: "进入房间中..",
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消进入",
              });
            });
        }
        return;
      } else {
        this.node++;
      }
      this.status = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.test {
  width: 100%;
  height: 100%;
  background: #ececec;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  .body {
    width: 990px;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    overflow: hidden;
    .start_test {
      width: 100%;
      height: 660px;
      background-image: url("../../assets/img/testing/testing-bg.png");
      background-size: 100% 100%;
      background-repeat: repeat-y;

      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
      border-radius: 4px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      .text {
        margin-bottom: 40px;
        text-align: center;
        .name {
          font-size: 36px;
          font-weight: 500;
          color: #ffffff;
          line-height: 50px;
        }
        .tips {
          margin-top: 12px;
          font-size: 22px;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.8);
          line-height: 30px;
        }
        button {
          cursor: pointer;
          box-sizing: border-box;
          display: block;
          margin: 0px auto;
          margin-top: 15px;
          width: 213px;
          height: 55px;
          background: #ffffff;
          border-radius: 7px;
          border: none;

          text-align: center;
          font-size: 22px;
          font-weight: 500;
          color: #475aa7;
          line-height: 55px;
        }
      }
    }
    .testing {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #ffffff;
      .heading {
        padding-left: 20px;
        height: 50px;
        background: #4d5fac;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        text-align: left;

        font-size: 18px;
        font-weight: 600;
        color: #ffffff;
        line-height: 50px;
      }
      .centent {
        height: 100%;
        display: flex;
        align-items: stretch;
        .test_list {
          width: 160px;
          border-right: solid 1px rgba(0, 0, 0, 0.1);
          .box {
            box-sizing: border-box;
            padding: 22px 0;
            justify-content: flex-start;
            padding-left: 36px;
            display: flex;
            align-items: center;
            color: rgba(0, 0, 0, 0.65);
            &.active {
              background: rgba(71, 90, 167, 0.1);
              color: #475aa7;
            }
            img {
              height: 16px;
              width: auto;
              margin-right: 9px;
            }
            .name {
              font-size: 14px;
              font-weight: 500;
              line-height: 16px;
            }
          }
        }
        .test_box {
          flex: 1;
          box-sizing: border-box;
          padding-top: 25px;
          padding-left: 40px;
          padding-right: 25px;
          padding-bottom: 25px;
          .next {
            display: flex;
            justify-content: flex-end;
            button {
              cursor: pointer;
              height: 45px;
              border-radius: 2px;
              border: 1px solid #475aa7;
              padding: 12px 33px;
              background: #ffffff;
              font-size: 18px;
              font-weight: 400;
              color: #475aa7;
              line-height: 22px;
            }
            .go_TRTC {
              background: #475aa7;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
}
</style>

